<template>
	<div>
		<!-- 头部 -->
		<header>
			<img src="./img/logo.png" class="logo" />
			<div class="top flex">
				<span class="line">国内版</span>
				<span class="out">国际版</span>
			</div>
			<div class="middle flex">
				<!-- 中间左 -->
				<div
					class="middle_left flex"
					@mouseenter="showDel = true"
					@mouseleave="showDel = false"
				>
					<input type="text" v-model="val" />
					<div class="imgs flex">
						<img
							class="clear"
							src="./img/关  闭.png"
							@click="del"
							v-show="showDel"
						/>
						<img class="mai" src="./img/麦克风.png" />
						<img src="./img/放大镜.png" />
					</div>
				</div>
				<!-- 中间右 -->
				<div class="middle_right flex">
					<button>登录</button>
					<span><img src="./img/三.png" /></span>
				</div>
			</div>
			<div class="bottom">
				<ul class="flex">
					<li
						v-for="(v, index) in list"
						:key="index"
						:class="{ bg: show == index }"
						@click="change(index)"
					>
						{{ v }}
					</li>
				</ul>
			</div>
		</header>
		<!-- 网页 -->
		<Web v-show="show == 0"></Web>
		<!-- 图片 -->
		<Photo v-show="show == 1"></Photo>
		<!-- 视屏 -->
		<Video v-show="show == 2"></Video>
		<!-- 学术 -->
		<Learning v-show="show == 3"></Learning>
	</div>
</template>

<script>
export default {
	components: {
		Learning: require('./Learning.vue').default,
		Photo: require('./Photo.vue').default,
		Video: require('./Video.vue').default,
		Web: require('./Web.vue').default,
	},
	data() {
		return {
			val: 'vue',
			show: '0',
			showDel: '',
			list: ['网页', '图片', '视频', '学术', '词典', '地图'],
		}
	},
	methods: {
		// 选项卡
		change(v) {
			this.show = v
		},
		// 清除input框
		del() {
			this.val = ''
		},
	},
}
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
ul > li {
	list-style: none;
}
.flex {
	display: flex;
}
header {
	width: 100%;
	padding-top: 20px;
	padding-left: 160px;
	border-bottom: 1px solid #ccc;
	position: relative;
	// logo
	.logo {
		height: 40px;
		position: absolute;
		left: 15px;
		top: 60px;
		cursor: pointer;
	}
	// 上部
	.top {
		margin-bottom: 10px;
		span {
			display: block;
			font-size: 13px;
			padding: 5px 13px;
			border-radius: 20px;
			margin-right: 10px;
			cursor: pointer;
		}
		.line {
			background-color: #e6f2f5;
		}
		.out {
			&:hover {
				background-color: #ccc;
			}
		}
	}
	// 中间
	.middle {
		width: 100%;
		justify-content: space-between;
		position: relative;
		// 中间左边
		.middle_left {
			width: 650px;
			height: 48px;
			padding: 2px 20px;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 2px 4px 1px rgb(0 0 0 / 9%);
			border-radius: 30px;
			border-left: 1px solid transparent;
			border-right: none;
			border-top: 1px solid transparent;
			border-bottom: 1px solid transparent;
			background-color: #fff;
			input {
				width: 510px;
				height: 100%;
				border: 0;
			}
			.imgs {
				justify-content: space-between;
				align-items: center;
				img {
					margin-right: 10px;
					cursor: pointer;
				}
				.mai {
					width: 25px;
				}
			}
		}
		// 中间右边
		.middle_right {
			margin-right: 50px;
			justify-content: space-between;
			align-items: center;
			button {
				width: 50px;
				cursor: pointer;
				&:hover {
					background: #fff;
				}
			}
			img {
				width: 50px;
				cursor: pointer;
				& > :hover {
					background-color: #f2f2f2;
				}
			}
		}
	}
	// 底部
	.bottom {
		ul {
			justify-content: start;
			align-items: center;
			width: 100%;
			li {
				font-size: 12px;
				display: block;
				width: 40px;
				height: 36px;
				margin: 0 12px;
				text-align: center;
				line-height: 36px;
				color: #444;
				border-bottom: 3px solid #fff;
				cursor: pointer;
				&:hover {
					border-bottom: 3px solid #ccc;
				}
			}
			.bg {
				border-bottom: 3px solid #00809d;
				font-weight: bold;
				&:hover {
					border-bottom: 3px solid #00809d;
				}
			}
		}
	}
}
</style>

